<template>
	<el-container>
		<el-aside width="300px" v-loading="menuloading">
			<el-container>
				<el-header>
					{{ptempInfo?ptempInfo.name:''}}
					<span>总分：{{ptempInfo.passScore}}分</span>
					<span>合格分：{{ptempInfo.totalScore}}分</span>
				</el-header>
				<el-main class="nopadding jxx-class-list">
					<el-tree ref="dic" class="menu" node-key="id" :data="classList" :props="dicProps"
						:highlight-current="true" :expand-on-click-node="false" :filter-node-method="dicFilterNode"
						@node-click="dicClick" :default-expanded-keys="defaultExpandedKeys" :default-expand-all="true">
						<template #default="{node, data}">
							<span class="custom-tree-node" :class="classId == data.id?'onClassActive':''"
								@click.stop="dicClick(node,data)">
								<span class="label">{{ node.label }}</span>
								<span class="code">{{ data.passScore }}</span>
								<span class="do">
									<el-button-group>
										<el-button v-if="node.level == 1" icon="el-icon-plus" size="small"
											@click.stop="addTwo(data)"></el-button>
										<el-button icon="el-icon-edit" size="small"
											@click.stop="dicEdit(node,data)"></el-button>
										<el-button icon="el-icon-delete" size="small"
											@click.stop="dicDel(data)"></el-button>
									</el-button-group>
								</span>
							</span>
						</template>
					</el-tree>
					<!-- <div v-for="(item,index) in classList" :key="index"
						class="u-m-10 jxx-item u-flex u-row-between u-col-center"
						:class="{'jxx-item-active':classIndex == index}" @click="onShow(item,index)">
						<div>
							{{item.name}}
						</div>
						<div>
							<el-icon class="u-m-r-10" @click.stop="onEditClass(item,index)"><el-icon-edit /></el-icon>
							<el-popconfirm title="确定删除吗？" @confirm="onDelClass(item,index)">
								<template #reference>
									<el-icon><el-icon-delete /></el-icon>
								</template>
							</el-popconfirm>
						</div>
					</div> -->
				</el-main>
				<el-footer style="height:51px;">
					<!-- <el-button type="primary" icon="el-icon-plus" @click="onEditItem()" style="width: 100%;">新增配置</el-button> -->
					<el-button type="primary" size="small" icon="el-icon-plus" style="width: 100%;"
						@click="addDic('add')">新增类别</el-button>
				</el-footer>
			</el-container>
		</el-aside>
		<el-container>
			<el-header>
				<el-button @click="onEditItem()">新增巡查项</el-button>
			</el-header>
			<el-main class="nopadding" style="padding:20px;" ref="main">
				<el-table :data="tableData" style="width: 100%" border>
					<el-table-column prop="name" label="具体问题" />
					<el-table-column prop="passScore" label="合格分" align="center" width="100" />
					<el-table-column label="操作" width="180" align="center">
						<template #default="spoce">
							<el-button text @click="onEditChild(spoce.row)">编辑</el-button>
							<el-button type='danger' text @click="onDelClass(spoce.row,index)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- <el-collapse v-model="activeNames" @change="handleChange" class="u-border" accordion>
					<el-collapse-item title="Consistency" name="1">
						<template #title>
							<div class="u-flex u-row-center">
								<div>
									户外
									<div>
										<el-button text @click="onEditItem">编辑</el-button>
										<el-button type='danger' text>删除</el-button>
									</div>

								</div>
								<el-icon class="header-icon">
									<info-filled />
								</el-icon>
							</div>
						</template>
						<el-table :data="tableData" style="width: 100%">
							<el-table-column prop="name" label="具体问题" />
							<el-table-column prop="num" label="分值" width="100" align="center" />
						</el-table>
					</el-collapse-item>
				</el-collapse> -->
				<!-- <el-row>
					<el-col>
						<el-card>
							<template #header>
								<div class="card-header u-flex u-row-between">
									<span>户外</span>
									<div>

									</div>
								</div>
							</template>
							<div>

							</div>
						</el-card>
						<el-card>
							<template #header>
								<div class="card-header u-flex u-row-between">
									<span>橱窗整洁性</span>
									<div>
										<el-button text @click="onEditItem">编辑</el-button>
										<el-button type='danger' text>删除</el-button>
									</div>
								</div>
							</template>
							<div>
								<el-table :data="tableData" style="width: 100%">
									<el-table-column prop="name" label="具体问题" />
									<el-table-column prop="num" label="分值" width="100" align="center" />
								</el-table>
							</div>
						</el-card>
					</el-col>
				</el-row> -->
			</el-main>
		</el-container>
	</el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess"
		@closed="dialog.save=false"></save-dialog>
	<dic-dialog v-if="dialog.dic" ref="dicDialog" @success="handleDicSuccess" @closed="dialog.dic=false"></dic-dialog>
	<childDialog v-if="dialog.child" ref="childDialog" @success="handleDicSuccess" @closed="dialog.child=false">
	</childDialog>
</template>

<script>
	import dicDialog from './class'
	import saveDialog from './save'
	import childDialog from './edit'
	export default {
		name: "ptempConfigIndex",
		components: {
			saveDialog,
			dicDialog,
			childDialog
		},
		data() {
			return {
				dialog: {
					save: false
				},
				dicProps: {
					label: 'name'
				},
				classDialog: false,
				childDialog: false,
				menuloading: false,
				activeNames: '1',
				classList: [],
				classId: null,
				classForm: {
					name: ''
				},
				tableData: [],
				menuFilterText: "",
				FormData: {},
				classInfo: {},
				classRules: {},
				pages: {
					"keyword": "",
					"page": 1,
					"pagesize": 100,
					"sort": ""
				},
				bigClass: null,
				defaultExpandedKeys:[],
				ptempId:null,
				ptempInfo:{}

			}
		},
		watch: {
			'classInfo.id'(val){
				this.defaultExpandedKeys = [val]
			}
		},
		created() {
			this.ptempId = this.$route.query.id

			//this.classList = this.ptempInfo.children
		},
		mounted() {
			//this.getDic()
			this.getInfo()
		},
		methods: {
			handleSaveSuccess(data){
				this.getInfo()
				this.upInfo(data)
				this.classId = data

			},
			// 修改内容
			onEditChild(item) {
				this.dialog.child = true
				this.$nextTick(() => {
					this.$refs.childDialog.open('edit').setData(item)
				})
			},
			handleDicSuccess() {
				this.getInfo()
			},
			//保存
			async classSave() {
				this.loading = true
				let parent = null
				if (Array.isArray(this.form.parent) && this.form.parent.length) {
					parent = this.form.parent.join(",")
				} else {
					parent = this.form.parent
				}
				let data = {
					title: this.form.meta.title,
					tag: this.form.tag,
					sortNumber: this.form.sortNumber,
					action: true,
					parent: parent,
					icon: this.form.meta.icon,
					path: this.form.path,
					component: this.form.component,
					menuType: this.form.meta.menuType,
				}
				if (this.form.id) {
					data.id = this.form.id
				}
				var res = await this.$API.system.menu.add.post(data)
				this.loading = false
				if (res.code == 200) {
					this.$message.success("保存成功")
				} else {
					this.$message.warning(res.message)
				}
			},
			onShow(item, index) {
				this.classIndex = index
			},
			onEditClass(item, index) {
				console.log(index)
				if (item) {
					this.classForm = item
				} else {
					this.classForm = {}
				}
				this.classDialog = true
				this.$nextTick(() => {
					this.$refs.classDialog.setData(this.classForm)
				})
			},
			onEditItem() {
				this.dialog.save = true
				this.$nextTick(() => {
					let data = {}
					if(this.classInfo){
						data = this.classInfo
					}
					this.$refs.saveDialog.open('add').setData(this.ptempInfo,data)

				})
			},
			//删除分类
			async onDelClass(row) {
				var reqData = {
					id: row.id
				}
				var res = await this.$API.api.ptemp.delete.post(reqData);
				if (res.code == 200) {
					this.upInfo()
					this.$message.success("删除成功")
				} else {
					this.$alert(res.message, "提示", {
						type: 'error'
					})
				}
			},
			//加载数据
			async getInfo() {
				var res = await this.$API.api.ptemp.get.post({
					id: this.ptempId
				});
				this.ptempInfo = res.data
				console.log('this.ptempInfo',this.ptempInfo)
				this.classList = []
				res.data.children.forEach((item, index) => {
					this.classList.push({
						id: item.id,
						name: item.name,
						passScore:item.passScore,
						children: []
					})
					if (item.children) {
						item.children.forEach(item2 => {
							this.classList[index].children.push({
								id: item2.id,
								name: item2.name,
								passScore:item2.passScore,
								children2: item2.children
							})
							if(this.classInfo && item2.id == this.classInfo.id){
								this.classInfo = item2
							}
						})
					}
				})
			},
			//加载数据
			async upInfo(data) {
				let id = data ? data :this.classInfo.id
				var res = await this.$API.api.ptemp.get.post({
					id: id
				});
				this.tableData = res.data.children
				// this.ptempInfo = res.data
				// this.classList = []
				// this.ptempInfo.children.forEach((item, index) => {
				// 	this.classList.push({
				// 		id: item.id,
				// 		name: item.name,
				// 		passScore:item.passScore,
				// 		children: []
				// 	})
				// 	if (item.children) {
				// 		item.children.forEach(item2 => {
				// 			this.classList[index].children.push({
				// 				id: item2.id,
				// 				name: item2.name,
				// 				passScore:item2.passScore,
				// 				children2: item2.children
				// 			})
				// 			if(this.classInfo.id && item2.id == this.classInfo.id){
				// 				this.classInfo = item2
				// 			}
				// 		})
				// 	}
				// })
			},
			//加载树数据
			async getDic() {
				var res = await this.$API.api.ptemp.list.post(this.pages);
				this.showDicloading = false;
				this.classList = res.data.datas;
				//获取第一个节点,设置选中 & 加载明细列表
				var firstNode = this.classList[0];
				if (firstNode) {
					this.$nextTick(() => {
						this.$refs.dic.setCurrentKey(firstNode.id)
					})
					this.listApiParams = {
						code: firstNode.code
					}
					this.listApi = this.$API.system.dic.list;
				}
			},
			//树过滤
			dicFilterNode(value, data) {
				if (!value) return true;
				var targetText = data.name + data.code;
				return targetText.indexOf(value) !== -1;
			},
			addTwo(data) {
				console.log(111,data)
				this.dialog.dic = true
				this.$nextTick(() => {
					this.$refs.dicDialog.open('add').setData(data,'', 'two')
				})
			},
			//树增加
			addDic() {
				this.dialog.dic = true
				this.$nextTick(() => {
					this.$refs.dicDialog.open('add').setData(this.ptempInfo,'','one')
				})
			},
			//编辑树
			dicEdit(node, data) {
				console.log(node, data)
				this.dialog.dic = true
				// this.$nextTick(() => {
				// 	this.$refs.dicDialog.open('edit').setData(data)
				// })
				if (node.level == 1) {
					this.dialog.dic = true
					this.$nextTick(() => {
						this.$refs.dicDialog.open('edit').setData('',data,'one')
					})
				}
				if (node.level == 2) {
					this.dialog.dic = true
					this.$nextTick(() => {
						this.$refs.dicDialog.open('edit').setData('',data,'one')
					})
				}
				// if (node.level == 2) {
				// 	this.onEditItem()
				// }

			},
			//树点击事件
			dicClick(node, data) {
				this.classInfo = data
				console.log('this.classInfo', this.classInfo)
				this.classList.forEach((item) => {
					if (item.id == data.id) {
						this.classId = item.id
					} else {
						if (item.children.length) {
							item.children.forEach(item2 => {
								if (item2.id == data.id) {
									this.classId = item2.id
								}
							})
						}
					}
				})
				this.bigClass = data
				console.log(this.classIndex, 888)
				if (node.level == 1) {
					this.bigClass = data
				} else {
					this.bigClass = null
				}

				this.tableData = this.classInfo.children2
			},
			//删除树
			dicDel(data) {
				this.$confirm(`确定删除 ${data.name} 项吗？`, '提示', {
					type: 'warning'
				}).then(() => {
					this.$API.api.ptemp.delete.post({
						id: data.id
					}).then(res=>{
						if(res.code == 200){

							this.$message.success("操作成功")
						}
						this.getInfo()
					})

				}).catch(() => {

				})
			},

			//添加明细
			addInfo() {
				this.dialog.list = true
				this.$nextTick(() => {
					var dicCurrentKey = this.$refs.dic.getCurrentKey();
					const data = {
						dic: dicCurrentKey
					}
					this.$refs.listDialog.open().setData(data)
				})
			},
			//编辑明细
			table_edit(row) {
				this.dialog.list = true
				this.$nextTick(() => {
					this.$refs.listDialog.open('edit').setData(row)
				})
			},
			async submit() {
				console.log('提交')
				let children_t = 0
				this.FormData.itemList.forEach(item => {
					console.log(item)
					children_t += item.passScore
				})
				let data = {
					id: this.FormData.id,
					children: [{
						name: this.FormData.bigname,
						passScore: children_t,
						demo: "",
						children: this.FormData.itemList
					}]
				}
				const res = await this.$API.api.ptemp.save.post(data)
				if (res.code == 200) {
					this.classDialog = false;
					this.$message.success("操作成功")
				} else {
					this.$alert(res.message, "提示", {
						type: 'error'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.menu:deep(.el-tree-node__label) {
		display: flex;
		flex: 1;
		height: 100%;
	}

	.custom-tree-node {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 24px;
		height: 100%;
	}

	.custom-tree-node .code {
		font-size: 12px;
		color: #999;
	}

	.custom-tree-node .do {
		display: none;
	}

	.custom-tree-node:hover .code {
		display: none;
	}

	.custom-tree-node:hover .do {
		display: inline-block;
	}

	.onClassActive {
		color: var(--el-color-primary);
	}

	.jxx-class-list {
		.jxx-item {
			border: 1px solid #ddd;
			padding: 10px;
			margin: 15px 20px;
			cursor: pointer;

			&:hover {
				border: 1px solid var(--el-color-primary);
				background-color: #fff;
			}
		}

		.jxx-item-active {
			border: 1px solid var(--el-color-danger);
			background-color: var(--el-color-danger-light-9);
			color: var(--el-color-danger);

			&:hover {
				border: 1px solid var(--el-color-danger);
				background-color: var(--el-color-danger-light-9);
				color: var(--el-color-danger);
			}
		}
	}
</style>
